import React, {
    Component,
} from 'react'
import { connect } from 'react-redux';
import { View, Text, Image, StyleSheet, TouchableOpacity, ImageBackground } from 'react-native'
import FastImage from 'react-native-fast-image'
import { Px } from '../utils'
import { AssetImages } from '../constants'

class VideoItem extends Component {

    static propTypes = {

    };

    // 生命周期
    constructor(props) {
        super(props)
        this.state = {

        }
    }

    // render part
    render() {
        const { item, userDetailAction, playAction, thumbsAction } = this.props
        const { 
            nick_name, // 名称
            head, // 头像
            thumbnail_url, // 图
            thumbnail_height, // 宽高
            thumbnail_width,
            title, // 描述
            agree_num = 0, // 数量
            has_agree = false
        } = item
        return (
            <View style={styles.contain}>
                <View style={styles.innerView}>
                    <TouchableOpacity
                        onPress={() => {
                            playAction(item)
                        }}
                        style={{ flex: 1}}>
                        <ImageBackground
                            style={[styles.image, {
                                width: Px(thumbnail_width),
                                height: Px(thumbnail_height)
                            }]}
                            source={{ url: thumbnail_url }}
                        >
                            <View style={{ flex: 1 }}></View>
                            <Image
                                style={styles.play}
                                source={AssetImages.VIDEO_PLAY}
                            />
                        </ImageBackground>
                    </TouchableOpacity>
                    
                    <View style={{flex: 1, width: '100%', paddingHorizontal: Px(14)}}>
                        <Text style={styles.detailText}>title</Text>
                        <View style={styles.publishView}>
                            <TouchableOpacity
                                onPress={() => {
                                    userDetailAction(item)
                                }}
                            >
                                <Image
                                    style={styles.headImage}
                                    source={{ url: head }}
                                />
                            </TouchableOpacity>
                            
                            <Text>{nick_name}</Text>
                            <TouchableOpacity
                                onPress={() => {
                                    thumbsAction(item)
                                }}
                            >
                                {this._renderAgreeImg(has_agree)}
                            </TouchableOpacity>
                            <Text style={styles.likeNumText}>{agree_num}</Text>
                        </View>
                        
                    </View>
                </View>
                
            </View>
        )
    }

    _renderAgreeImg(has_agree) {
        if (has_agree) {
            return (
                <Image
                    source={AssetImages.LIKED_RED}
                    style={styles.likeImage}
                />
            )
        } else {
            return (
                <Image
                    source={AssetImages.LIKE}
                    style={styles.likeImage}
                />
            )
        }
    }
}

const styles = StyleSheet.create({
    contain: {
        // flex: 1,
        width: '50%',
        alignItems: 'center',
        justifyContent: 'space-around',
        marginTop: Px(16)
    },
    innerView: {
        backgroundColor: '#fff',
        borderRadius: Px(10),
        width:'93%',
        alignItems: 'center',
        flex: 1
    },
    image: {
        width: '90%',
        height: Px(240),
        borderRadius: Px(10),
        marginTop: Px(10),
        flex: 1,
        flexDirection: 'row',
    },
    play: {
        width: Px(40),
        height: Px(40),
        marginTop: Px(20),
        marginRight: Px(20)
    },
    headImage: {
        width: Px(36),
        height: Px(36),
        marginRight: Px(10),
        borderRadius: Px(18)
    },
    publishView: {
        flexDirection: 'row',
        alignItems:'center',
        marginBottom: Px(14),
        marginTop: Px(14)
    },
    detailText: {
        fontSize: Px(26),
        marginTop: Px(14)
    },
    likeNumText: {
        marginLeft: Px(14),
        fontSize: Px(26)
    },
    likeImage: {
        width: Px(30),
        height: Px(30),
        marginLeft: Px(14)
    }
})

export default connect(state => ({

})
)(VideoItem)